<template>
  <div style="margin-right: 32px;min-width: 110px" v-if="systems.length > 1">
    <el-dropdown style="height:36px;background:#f8f8f8;padding:0px 20px;border-radius:18px;" v-if="systems.length > 1">
      <div class="dp-flex justify-content-center align-items height-full width-full">
        <span class="header-avatar" style="cursor: pointer">
          <span>系统切换</span>
          <i class="el-icon-arrow-down" />
        </span>
      </div>
      <template #dropdown>
        <el-dropdown-menu class="dropdown-group">
          <el-dropdown-item v-for="(item,index) in systems" :key="item.id" icon="el-icon-s-custom" @click="systemChang(item)">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import {crmStore} from "../../pages/CRM/store";
import {reactive} from 'vue'
import {sysList} from '@/constant/appDic.js'

export default {
  setup() {
    const systems = crmStore.getters['user/system']
    const systemList = reactive(sysList)
    const systemChang = (item) => {
      window.location.href = item.path
      sessionStorage.setItem('historys', JSON.stringify([]))
    }
    return {
      systemList,
      systems,
      systemChang
    }
  },
}
</script>

